{{ header }}
<div id="product-category" class="container">
    {% if distributary %}
    <div id="content">
        <div class="header">
            <h2>{{ heading_title }}</h2>
            <a href="{{ home }}" class="back"><i class="iconfont icon-flow"></i></a>
        </div>
        <div class="content">
            
			{% if thumbimage_z or description %}
                <img src="{{ thumbimage_z }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="cate-img"/>
            {% endif %}
            {% if products %}
                <div style="display: none" class="sort">
                    <div>
                        <label class="input-group-addon" for="input-sort">{{ text_sort }}</label>
                        <select id="input-sort" class="form-control select-sort" onchange="location = this.value;">
                            {% for sorts in sorts %}
                                {% if sorts.value == '%s-%s'|format(sort, order) %}
                                    <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                                {% else %}
                                    <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="input-group-addon" for="input-limit">{{ text_limit }}</label>
                        <select id="input-limit" class="form-control select-limits" onchange="location = this.value;">
                            {% for limits in limits %}
                                {% if limits.value == limit %}
                                    <option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
                                {% else %}
                                    <option value="{{ limits.href }}">{{ limits.text }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="product-content">
                    {% for product in products %}
                        <div class="product-layout">
                            <div class="product-thumb transition">
                                <div class="image">
                                    <div class="discount">
                                        <span class="discount-num">{{ '9.5' }}</span>
                                        <span class="discount-text">折</span>
                                    </div>
                                    <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}"
                                                                      title="{{ product.name }}"
                                                                      class="img-responsive"/></a>
                                </div>
                                <div class="caption">
                                    <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                                    {% if product.price %}
                                        <p class="price">
                                            {% if not product.special %}
                                                {{ product.price }}
                                            {% else %}
                                                <span class="price-old">{{ product.price }}</span>
                                                <span class="price-new">{{ product.special }}</span>
                                            {% endif %}
                                        </p>
                                    {% endif %}
                                    <div class="like">
                                        <div class="fb-like" data-href="{{ product.href }}" data-width="500"
                                             data-layout="button_count" data-action="like" data-size="small"
                                             data-show-faces="false" data-share="false"></div>
                                        <div>
                                            {% if product.rating %}
                                                <div class="rating stars">
                                                    {% for i in 1..5 %}
                                                        {% if product.rating < i %}
                                                            <span class="star fa fa-stack">
                                                <i class="star fa fa-star-o fa-stack-2x"></i>
                                            </span>
                                                        {% else %}
                                                            <span class="star fa fa-stack">
                                                <i class="star fa fa-star fa-stack-2x"></i>
                                                <i class="star fa fa-star-o fa-stack-2x"></i></span>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                            {% if product.reviews %}
                                                ({{ product.reviews }})
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div>
                    <div class="text-left">{{ pagination }}</div>
                    <div class="text-right">{{ results }}</div>
                </div>
            {% endif %}
            {% if not categories and not products %}
                <p>{{ text_empty }}</p>
                <div class="buttons">
                    <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div id="content">
        <div class="contents">
           			
			{% if thumbimage_z or description %}
                <img src="{{ thumbimage_z }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="cate-img"/>
            {% endif %}
            {% if products %}
                <h2>{{ heading_title }}</h2>
                <div class="product-content">
                    {% for product in products %}
                        <div class="product-layout">
                            <div class="product-thumb transition">
                                <div class="image">
                                    <div class="discount">
                                        <span class="discount-num">{{ '9.5' }}</span>
                                        <span class="discount-text">折</span>
                                    </div>
                                    <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}"
                                                                      title="{{ product.name }}"
                                                                      class="img-responsive"/></a>
                                </div>
                                <div class="caption">
                                    <div style="height: 32px;">
                                        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                                    </div>
                                    {% if product.price %}
                                        <p class="price">
                                            {% if not product.special %}
                                                {{ product.price }}
                                            {% else %}
                                                <span class="price-old">{{ product.price }}</span>
                                                <span class="price-new">{{ product.special }}</span>
                                            {% endif %}
                                        </p>
                                    {% endif %}
                                    <div class="to-buy">
                                        直接購買
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            {% if not categories and not products %}
                <p>{{ text_empty }}</p>
                <div class="buttons">
                    <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a>
                    </div>
                </div>
            {% endif %}
            <div class="back">
                <a href="{{ home }}">返回首頁</a>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{#{{ footer }} #}
